<template>
  <div class="min-h-screen bg-gray-50">

    <div class="max-w-7xl mx-auto px-4 py-8">
      <div class="grid grid-cols-3 gap-8">
        <div class="col-span-2">
          <div class="bg-white p-6 rounded-lg shadow-md mb-8">
            <div class="flex items-center justify-between mb-6">
              <h2 class="text-xl font-bold">テスト完了</h2>
              <div class="flex items-center gap-4">
                <div class="text-2xl font-bold text-primary">合計スコア：{{ score }}分</div>
              </div>
            </div>
            <div class="grid grid-cols-4 gap-6 mb-8">
              <div class="p-4 border border-gray-200 rounded-lg text-center">
                <p class="text-gray-500 mb-2">総問題数</p>
                <p class="text-2xl font-semibold">5</p>
              </div>
              <div class="p-4 border border-gray-200 rounded-lg text-center">
                <p class="text-gray-500 mb-2">正解数</p>
                <p class="text-2xl font-semibold text-green-500">{{ 5 - list.length }}</p>
              </div>
              <div class="p-4 border border-gray-200 rounded-lg text-center">
                <p class="text-gray-500 mb-2">誤答数</p>
                <p class="text-2xl font-semibold text-red-500">{{ list.length }}</p>
              </div>

            </div>
            <div class="space-y-6">
              <div class="p-4 border border-gray-200 rounded-lg" v-for="(item, index) in list" :key="index">
                <div class="flex justify-between items-start mb-4">
                  <span class="text-red-500">誤答</span>
                  <el-button type="primary"
                    @click="reset_question(item.id, item.exercise_id, item.category_id, item.branch_id)">もう一度答える</el-button>
                </div>
                <p class="text-gray-700 mb-4">{{ item.exercise_text }}</p>
                <div class="space-y-2">
                  <p class="text-sm text-gray-500">あなたの答え：{{ item.user_answer }}</p>
                  <p class="text-sm text-green-600">正解：{{ item.answer_result }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="space-y-6">

          <div class="bg-white p-6 rounded-lg shadow-md h-fit">
            <h3 class="text-lg font-medium mb-4">学習データです</h3>
            <div class="space-y-6">
              <div class="p-4 bg-gray-50 rounded-lg">
                <h4 class="font-medium text-sm mb-3">今週の勉強の概要です</h4>
                <div class="space-y-2">
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-600">問題の完了数</span>
                    <span class="font-medium">{{ count_total?.completed_tasks }}</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-600">今週の正解率です</span>
                    <span class="font-medium">{{ count_total?.correctness_rate }}%</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-600">今週の達成率です</span>
                    <span class="font-medium">{{ count_total?.completion_rate }}%</span>
                  </div>
                  <!-- <div class="flex justify-between text-sm">
          <span class="text-gray-600">今週の勉強時間です</span>
          <span class="font-medium">{{ roundMinutes(count_total?.total_study_time) }}{{
            isMinuteOrHour(roundMinutes(count_total?.total_study_time)) }}</span>
        </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios.js"

export default {
  data() {
    return {
      success_len: 0,
      error_len: 0,
      score: 0,
      time: 0,
      branch_id: null,
      count_total: {},
      list: [],
    }


  },
  async mounted() {
    this.branch_id = this.$route.query.branch_id
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    await this.getResouce()
    await this.getCunts()
    this.user_category()
    loading.close()
  },
  methods: {
    async getCunts() {
      let data = await get("/get_week_user_success_task")
      this.count_total = data.data.data
    },
    reset_question(answer_id, exercise_id, category_id, branch_id) {

      this.$router.push({ path: "/exercise", query: { answer_id: answer_id, exercise_id: exercise_id, id: category_id, branch_id: branch_id, user_question: true } })
    },
    async user_category() {
      await post("/user_category", { source: this.score, category_id: sessionStorage.getItem("category_id") })
    },
    roundMinutes(minutes) {
      return Math.round(minutes);
    },
    isMinuteOrHour(value) {
      // 处理负数和非整数情况
      if (value < 0 || !Number.isInteger(value)) {
        return '無効な入力は、非負の整数を入力してください';
      }

      // 处理分钟
      if (value >= 0 && value < 60) {
        return '分';
      }

      // 处理小时，包括超过23小时但小于48小时的情况
      if (value >= 0 && value <= 23) {
        return '時間';
      } else if (value > 23 && value <= 47) {
        // 将超过24小时但小于48小时的值转换为0-23的范围
        value = value - 24;
        return '時間';
      } else if (value > 47 && value <= 71) {
        value = value - 48;
        return '時間';
      } else {
        return '時間や分の値は有効ではありません';
      }
    },
    format(text) {
      return text.replace(/\\(.)/g, "$1");
    },
    async getCard() {
      let data = await get("/getTimeScore", { branch_id: this.branch_id })
      this.score = data.data.data.score
      this.time = data.data.data.duration
    },
    async getResouce() {
      let data = await get("/error_user_replay", { branch_id: this.branch_id })
      this.list = data.data.data
    }
  }
}
</script>

<style>
.el-button {
  font-weight: normal;
}

.el-progress-bar__outer {
  height: 8px !important;
  border-radius: 9999px !important;
}

.el-progress-bar__inner {
  border-radius: 9999px !important;
}

.text-custom {
  color: #409EFF;
}

.text-primary {
  color: #409EFF;
}

.border-primary:hover {
  border-color: #409EFF;
}
</style>